<template>
  <div class="input-bottom-dialogue">
    <!--            头像-->
    <div style="margin-right: 14px;">
      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>
    </div>
    <!--            右侧对话框-->
    <div class="input-bottom-dialogue-container">
      <div class="input-bottom-dialogue-container-box">

        <div class="timer">
          <div class="input-tip-title entourage-list">
            <div style="display: flex;align-items:  center; ">
              <div class="tip">
                <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
              </div>
              <div class="title">关于服务投诉,您还需要明确具体内容:</div>
            </div>
          </div>
          <div class="category-list">
            <div @click="navigationClick(item,index)"
                 :class="currentNavigation===index?'active-category-list-item':'category-list-item'"
                 v-for="(item,index) in navigationList">
              <div class="category-list-item-title">
                {{item.name}}
              </div>
            </div>
          </div>
        </div>

      </div>


    </div>

  </div>
  <div class="input-bottom-dialogue" v-if="currentNavigation>-1">
    <!--            头像-->
    <div style="margin-right: 14px;">
      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>
    </div>
    <!--            右侧对话框-->
    <div class="input-bottom-dialogue-container">
      <div class="input-bottom-dialogue-container-box">

        <div class="timer">
          <div class="input-tip-title entourage-list">
            <div style="display: flex;align-items:  center; ">
              <div class="tip">
                <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
              </div>
              <div class="title">关于{{currentSpecificTitle}}服务投诉,您还需要明确具体内容:</div>
            </div>
          </div>
          <div class="category-list">
            <div @click="specificClick(item,index)"
                 :class="currentServiceComplaints===index?'active-category-list-item':'category-list-item'"
                 v-for="(item,index) in currentSpecificCategories">
              <div class="category-list-item-title">
                {{item.name}}
              </div>
            </div>
          </div>
        </div>

      </div>


    </div>

  </div>
  <div class="service-input-bottom-dialogue" v-if="currentServiceComplaints>-1">
    <!--            头像-->
    <div style="margin-right: 14px;">
      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>
    </div>
    <!--            右侧对话框-->
    <div class="input-bottom-dialogue-container">
      <div class="input-bottom-dialogue-container-box">

        <div class="timer">
          <div class="input-tip-title entourage-list">
            <div style="display: flex;align-items:  center; ">
              <div class="tip">
                <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
              </div>
              <div class="title">关于{{currentServiceComplaintsTitle}}服务投诉,您还需要提供具体内容:</div>
            </div>
          </div>
          <div class="category-list">
            <div @click="navigationClick(item,index)"
                 :class="currentServiceComplaints===index?'active-category-list-item':'category-list-item'"
                 v-for="(item,index) in currentSpecificCategories">
              <div class="category-list-item-title">
                {{item.name}}
              </div>
            </div>
          </div>
          <div class="input-modal">
            <div class="input-modal-title">
              <el-input v-model="inputValue" placeholder="请输入投诉意见"></el-input>
            </div>
            <div class="input-modal-title">
              <el-upload
                  :on-success="handleSuccess"
                  :action="uploadUrl"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :headers="headers"
              >
               <div class="upload-file">
                 <div class="upload-file-container">
                   <div style="display: flex;justify-content: center">
                     <img style="width: 14px;height: 14px" src="@/assets/images/notLoggedIn/add@2x.png"></img>
                   </div>
                   <div style="margin-top:  10px;display: flex;justify-content: center">上传</div>
                 </div>

               </div>
              </el-upload>
            </div>

          </div>
        </div>
        <div class="query-button-groups">
          <div class="btn-box" @click="cancelServiceComplaintsApi">
            <div class="login-btn">
             撤回投诉
            </div>
          </div>
          <div class="btn-box right-btn" @click="onsubmitServer">
            <div class="login-btn">
              确认提交
            </div>
          </div>
        </div>

      </div>


    </div>

  </div>
</template>
<script setup>
import {reactive, ref, watch} from "vue";
import {getHeaders} from "@/utils/compUtils";
import {uploadUrl} from "@/hook/setting";
const props=defineProps({
  clearStatus: {
    type: Boolean,
    default: () => {
      return false
    }
  }
})
const headers = getHeaders();
import api from "@/service/TouristHomepage";
import {useTouristHomepageStore} from "@/store/touristHomepage";
const currentNavigation=ref(-1);
const navigationList=ref([
  {
    id:'1',
    complaintType:'01',
    name:'服务质量类',
    price:'10',
    distance:'10',
    isSelected:false,
    children:[
        {
          id:'1',
          complaintType:'0101',
          name:'导览服务',
          price:'10',
          distance:'10',
          isSelected:false
        },
        {
          id:'2',
          complaintType:'0102',
          name:'工作人员态度',
          price:'10',
          distance:'10',
          isSelected:false
        },
        {
          id:'3',
          complaintType:'0103',
          name:'讲解设备故障',
          price:'10',
          distance:'10',
          isSelected:false
        },
    ]
  },
  {
    id:'2',
    complaintType:'02',
    name:'设施维护类',
    price:'10',
    distance:'10',
    isSelected:false,
    children:[
      {
        id:'1',
        complaintType:'0201',
        name:'安全隐患',
        price:'10',
        distance:'10',
        isSelected:false
      },
      {
        id:'2',
        complaintType:'0202',
        name:'卫生问题',
        price:'10',
        distance:'10',
        isSelected:false
      },
      {
        id:'3',
        complaintType:'0203',
        name:'标识缺失',
        price:'10',
        distance:'10',
        isSelected:false
      },
    ]
  },
  {
    id:'3',
    complaintType:'03',
    name:'消费纠纷类',
    price:'10',
    distance:'10',
    isSelected:false,
    children:[
      {
        id:'1',
        complaintType:'0301',
        name:'商品价格',
        price:'10',
        distance:'10',
        isSelected:false
      },
      {
        id:'2',
        complaintType:'0302',
        name:'餐饮卫生',
        price:'10',
        distance:'10',
        isSelected:false
      },
      {
        id:'3',
        complaintType:'0303',
        name:'强制消费',
        price:'10',
        distance:'10',
        isSelected:false
      },
    ]
  },
  {
    id:'4',
    complaintType:'04',
    name:'政策执行类',
    price:'10',
    distance:'10',
    isSelected:false,
    children:[
      {
        id:'1',
        complaintType:'0401',
        name:'门票优惠争议',
        price:'10',
        distance:'10',
        isSelected:false
      },
      {
        id:'2',
        complaintType:'0402',
        name:'特殊群体服务',
        price:'10',
        distance:'10',
        isSelected:false
      },
    ]
  },
])
const currentSpecificCategories=ref([])
const currentSpecificTitle=ref('');
function navigationClick(data,index){
  currentNavigation.value=index;
  currentSpecificCategories.value=data.children;
  currentSpecificTitle.value=data.name;
  complaintType.value=data.complaintType;
  isNavigationShow.value=true;
  currentServiceComplaints.value=-1;
  useTouristHomepageStore().setTouristClearStatus(false)
}
const isNavigationShow=ref(false);
const currentServiceComplaints=ref(-1)
const currentServiceComplaintsTitle=ref('')
function specificClick(data,index){
  currentServiceComplaints.value=index;
  currentServiceComplaintsTitle.value=data.name;
  complaintSpecificContentType.value=data.complaintType;
}
const inputValue=ref('')
const dialogImageUrl=ref('')
const dialogVisible=ref(false);
function handleRemove(file, fileList) {
}
function  handlePictureCardPreview(file) {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
}
const complaintFileId=ref('')
function handleSuccess(response, file, fileList) {
  if(response.code===200){
    complaintFileId.value=response.data.id;
  }
}
const complaintType=ref('')
const complaintSpecificContentType=ref('')

function onsubmitServer(){
  let parms={
    complaintType:complaintType.value,
    complaintSpecificContentType:complaintSpecificContentType.value,
    complaintSpecificContent:currentServiceComplaintsTitle.value,
    complaintOpinion:inputValue.value,
    complaintFile:String(complaintFileId.value)
  }
  api.createOrUpdateServiceComplaints(parms).then((res)=>{
    serviceId.value=String(res.data.id)
    getServiceComplaintsApi(String(res.data.id))
  })
}
// 查询投诉
function getServiceComplaintsApi(data){
  api.getServiceComplaintsDetail({serviceComplaintId:data}).then((res) => {
    console.log("请求投诉详情数据",res)
  })
}
// 撤销投诉
const serviceId=ref('')
function cancelServiceComplaintsApi(data){
  api.cancelServiceComplaints({serviceComplaintId:serviceId.value}).then((res) => {
    console.log("撤销投诉",res)
  })
}
// 监听useTouristHomepageStore().touristClearStatus
watch(() => useTouristHomepageStore().touristClearStatus, () => {
  if(useTouristHomepageStore().touristClearStatus){
    isNavigationShow.value=false;
    currentNavigation.value=-1;
    currentServiceComplaints.value=-1;

  }
})
</script>
<style scoped lang="scss">
@import "@/assets/main.scss";
//旅游路线规划
.input-bottom-dialogue{
  display: flex;
  margin: 20px 0;
  .input-bottom-dialogue-container{
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 106px;
    background: #EDDDCD;
    border-radius: 10px 10px 10px 10px;
    width: calc(100% - 20px);
    .input-bottom-dialogue-container-box{
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      .timer{
        border-bottom: 1px solid #EBD7C5;
        .entourage-list{
          justify-content: space-between;
          width:100%;
        }
        .input-tip-title{
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .title{
            height: 16px;
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        .category-list{
          display: flex;
          margin-top: 16px;
          //  换行
          flex-wrap: wrap;
          margin-bottom: 10px;
          .category-list-item{
            cursor: pointer;
            margin-left: 8px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            font-family: DingliesongtypefaceRegular;
            height: 22px;
            background: #F5ECE2;
            border-radius: 6px 6px 6px 6px;
            line-height: 22px;
            .category-list-item-title{
              padding: 0 5px;
            }
          }
          .active-category-list-item{
            cursor: pointer;
            margin-left: 8px;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            text-align: left;
            font-style: normal;
            text-transform: none;
            font-family: DingliesongtypefaceRegular;
            height: 22px;
            background: #9B6548;
            border-radius: 6px 6px 6px 6px;
            line-height: 22px;
            .category-list-item-title{
              padding: 0 5px;
            }
          }


        }
      }
      .culture-ai-title{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .title{
          width: 68px;
          height: 16px;
          font-family: DingliesongtypefaceRegular;
          font-weight: 400;
          font-size: 16px;
          color: #9B6548;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .culture-AI{
        height: 210px;
        display: flex;
        .culture-left{
          width: 100%;
          height: 100%;
          background-image: url("@/assets/images/notLoggedIn/frame@2x.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .culture-container-title{
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 20px;
            margin-bottom: 10px;
          }
          .culture-container{
            width: 483px;
            height: 144px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            overflow: auto;
          }
        }
        .culture-right{
          margin-left: 40px;
          width: 100%;
          height: 100%;
          background-image: url("@/assets/images/notLoggedIn/frame@2x.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .culture-container-title{
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 20px;
            margin-bottom: 10px;
          }
          .culture-container-video{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 483px;
            height: 144px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            overflow: auto;
          }
        }
      }

    }

  }
}
//  旅游路线规划
.specifics{
  margin-top: 20px;
}
.service-input-bottom-dialogue{
  display: flex;
  margin: 20px 0;
  .input-bottom-dialogue-container{
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 310px;
    background: #EDDDCD;
    border-radius: 10px 10px 10px 10px;
    width: calc(100% - 20px);
    .input-bottom-dialogue-container-box{
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      .timer{
        border-bottom: 1px solid #EBD7C5;
        .entourage-list{
          justify-content: space-between;
          width:100%;
        }
        .input-tip-title{
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .title{
            height: 16px;
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        .category-list{
          display: flex;
          margin-top: 16px;
          //  换行
          flex-wrap: wrap;
          margin-bottom: 10px;
          .category-list-item{
            cursor: pointer;
            margin-left: 8px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            font-family: DingliesongtypefaceRegular;
            height: 22px;
            background: #F5ECE2;
            border-radius: 6px 6px 6px 6px;
            line-height: 22px;
            .category-list-item-title{
              padding: 0 5px;
            }
          }
          .active-category-list-item{
            cursor: pointer;
            margin-left: 8px;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            text-align: left;
            font-style: normal;
            text-transform: none;
            font-family: DingliesongtypefaceRegular;
            height: 22px;
            background: #9B6548;
            border-radius: 6px 6px 6px 6px;
            line-height: 22px;
            .category-list-item-title{
              padding: 0 5px;
            }
          }


        }
        .input-modal{
          .input-modal-title{
          margin-bottom: 20px;
            .upload-file{
              width: 76px;
              height: 76px;
              border-radius: 2px 2px 2px 2px;
              border: 1px solid #E3C7AC;
              display: flex;
              justify-content: center;
              align-items: center;
              .upload-file-container{
                width: 50px;
                height: 50px;
                color:  #9B6548;
                font-family: DingliesongtypefaceRegular;
                font-weight: 400;


              }
            }

          }

        }
      }
      .culture-ai-title{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .title{
          width: 68px;
          height: 16px;
          font-family: DingliesongtypefaceRegular;
          font-weight: 400;
          font-size: 16px;
          color: #9B6548;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .culture-AI{
        height: 210px;
        display: flex;
        .culture-left{
          width: 100%;
          height: 100%;
          background-image: url("@/assets/images/notLoggedIn/frame@2x.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .culture-container-title{
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 20px;
            margin-bottom: 10px;
          }
          .culture-container{
            width: 483px;
            height: 144px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            overflow: auto;
          }
        }
        .culture-right{
          margin-left: 40px;
          width: 100%;
          height: 100%;
          background-image: url("@/assets/images/notLoggedIn/frame@2x.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .culture-container-title{
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 20px;
            margin-bottom: 10px;
          }
          .culture-container-video{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 483px;
            height: 144px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            overflow: auto;
          }
        }
      }
      .query-button-groups{
        display: flex;
        justify-content: end;
        .right-btn{
          margin-left: 14px;
        }
        .btn-box{
          margin-top: 14px;
          height: 50px;
          border-radius: 0px 0px 0px 0px;
          display: flex;
          justify-content: center;
          .login-btn {
            cursor: pointer;
            background-image: url("@/assets/images/notLoggedIn/bnt2@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 138px;
            height:42px;
            border-radius: 4px 4px 4px 4px;
            font-family: DingliesongtypefaceRegular;
            font-size: 16px;
            letter-spacing: 5px;
            color: #FFFFFF;
            line-height: 42px;
            text-align: center;
            &:hover {
              background-image: url("@/assets/images/login/login_btn_highlight.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              width: 138px;
              height:50px;
              border-radius: 4px 4px 4px 4px;
              font-family: DingliesongtypefaceRegular;
              font-size: 16px;
              letter-spacing: 5px;
              color: #FFFFFF;
              line-height:42px;
              text-align: center;
            }
          }
        }
      }

    }

  }
}
</style>
<style>
@import "@/assets/main.scss";
</style>